<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<script type="text/javascript" src="<%=basePath %>js/plugins/jquery-1.7.min.js"></script>
		<title>支付</title>
		<style>
			/*清除iOS样式*/
			
			input[type="button"],
			input[type="submit"],
			input[type="reset"],input[text] {
				-webkit-appearance: none;
				appearance: none;
			}
			
			textarea {
				-webkit-appearance: none;
			}
			
			body,
			html {
				margin: 0;
				padding: 0;
				min-height: 100%;
				background: #f5f5f9;
				padding: 8px 0;
				box-sizing: border-box;
			}
			
			.content {
				background: white;
			}
			
			ul {
				padding: 0;
				margin: 0;
			}
			
			li {
				list-style: none;
			}
			
			.flex {
				display: flex;
				flex-flow: row inwrap;
				justify-content: flex-start;
				padding: 0 8px;
				width: 90%;
				margin: 0 auto;
			}
			
			.flex.spb {
				justify-content: space-between;
				position: relative;
			}
			
			li.flex:after {
				content: '';
				position: absolute;
				width: 100%;
				height: 1px;
				background: #e5e5e5;
				bottom: 0;
				left: 0;
				transform: scaleY(0.5);
				-webkit-transform: scaleY(0.5);
			}
			
			.item {
				box-sizing: border-box;
				padding: 15px 0;
			}
			
			.item.title {
				color: #999999;
			}
			
			.submit {
				text-align: center;
				margin-top: 30px;
				padding: 0 20px;
			}
			
			.submit input {
				width: 90;
				width: 100%;
				background: #00aaee;
				border: none;
				color: white;
				padding: 15px 0;
				font-size: 15px;
				border-radius: 4px;
				-webkit-border-radius: 4px;
			}
			
			.gray {
				color: #cccccc;
			}
			
			input[type=text],
			input[type=password] {
				border: 1px solid #e5e5e5;
				height: 25px;
				padding: 1px 5px;
				border-radius: 4px;
				-webkit-border-radius: 4px;
			}
			
			.code input {
				width: 100px;
			}
			
			.get_code {
				height: 100%;
				top: 0;
				right: 0;
				min-width: 70px;
				font-size: 14px;
				background: #00aaee;
				color: white;
				padding: 5px;
				border-radius: 4px;
				-webkit-border-radius: 4px;
			}
			#wait.get_code{display: none;background: #999999;}
		</style>
	</head>

	<body>
		<form action="" method="post">
			<div class="content">
				<ul>
					<li class="flex spb">
						<input type="hidden" id="acctType" value="${acctType}"/>
						<div class="item title">银行卡号</div>
						<c:if test="${null != cardNo}">
							<div class="item info gray"><input type="text" id="cardNo" value="${cardNo}" readonly="readonly" disabled="disabled" class="code_input"/></div>
						</c:if>
						<c:if test="${null == cardNo}">
							<div class="item info gray"><input type="text" id="cardNo" placeholder="输入银行卡号" class="code_input"/></div>
						</c:if>
					</li>
					<li class="flex spb">
						<div class="item title">姓名</div>
						<div class="item info gray"><input type="text" id="userName" placeholder="输入姓名" class="code_input"/></div>
					</li>
					<li class="flex spb">
						<div class="item title">身份证号码</div>
						<div class="item info gray"><input type="text" id="certNo" placeholder="输入身份证号码" class="code_input"/></div>
					</li>
					<!-- <li class="flex spb">
						<div class="item title">银行卡密码</div>
						<div class="item info"><input type="password" placeholder="输入银行卡密码"></div>
					</li> -->
					<li class="flex spb">
						<div class="item title">银行预留手机号</div>
						<div class="item info gray"><input type="text" id="cardPhone" placeholder="输入银行预留手机号" class="code_input"/></div>
					</li>
					<c:if test="${acctType == 1}">
						<li class="flex spb">
							<div class="item title">信用卡到期时间</div>
							<c:if test="${null != expireDate}">
								<div class="item info gray"><input type="text" id="expireDate" value="${expireDate}" readonly="readonly" disabled="disabled" class="code_input"/></div>
							</c:if>
							<c:if test="${null == expireDate}">
								<div class="item info gray"><input type="text" id="expireDate" placeholder="输入信用卡到期时间" class="code_input"/></div>
							</c:if>
						</li>
						<li class="flex spb">
							<div class="item title">信用卡安全码</div>
							<c:if test="${null != cvn}">
								<div class="item info gray"><input type="text" id="cvn" value="${cvn}" readonly="readonly" disabled="disabled" class="code_input"/></div>
							</c:if>
							<c:if test="${null == cvn}">
								<div class="item info gray"><input type="text" id="cvn" placeholder="输入信用卡安全码" class="code_input"/></div>
							</c:if>
						</li>
					</c:if>
					<li class="flex spb" id="show" style="display:none">
						<div class="item title">短信验证码</div>
						<div class="item info code">
							<input type="text" id="MessageNumber" placeholder="输入短信验证码" class="code_input">
							<a class="get_code" id="get_code">获取验证码</a>
							<a id="wait" class="get_code" style="height: 50%;">60秒重新获取</a>
						</div>
					</li>
				</ul>
			</div>
			<div class="submit">
				<input type="button" value="确认提交" onclick="save()"/>
			</div>

		</form>
	</body>
<script>
	FLAG = false;
	var get_code = document.getElementById('get_code');
	var wait = document.getElementById('wait');
	var timer;
	get_code.onclick=function(){
		var cardNo = $("#cardNo").val();
		var userName = $("#userName").val();
		var certNo = $("#certNo").val();
		var cardPhone = $("#cardPhone").val();
		var MessageNumber = $("#MessageNumber").val();
		var acctType = $("#acctType").val();
		if(!cardNo){
			alert("请输入银行卡号");
			return;
		}
		if(!userName){
			alert("请输入姓名");
			return;
		}
		if(!certNo){
			alert("请输入身份证号码");
			return;
		}
		if(!cardPhone){
			alert("请输入银行预留号码");
			return;
		}
		if(acctType == 1){
			var expireDate = $("#expireDate").val();
			var cvn = $("#cvn").val();
			if(!expireDate){
				alert("请输入信用卡过期时间");
				return;
			}
			if(!cvn){
				alert("请输入信用卡安全码");
				return;
			}
		}
		/* if(!MessageNumber){
			alert("请输入短信验证码");
			return;
		} */
		var data = {cardNo:cardNo,userName:userName,certNo:certNo,cardPhone:cardPhone,acctType:acctType,expireDate:expireDate,cvn:cvn,MessageNumber:MessageNumber};
		$.post('/pay/open.do',data);
		this.style.display='none';
		wait.style.display='inline-block';
		var i=60;
		timer = setInterval(function(){
			if(i<=0){
				get_code.style.display='inline-block';
				wait.style.display='none';
				clearInterval(timer);
			}else{
				i--;
				wait.innerText=i+'秒重新获取';
			}
		},1000)
	}
	
	
	function save(){
		var cardNo = $("#cardNo").val();
		var userName = $("#userName").val();
		var certNo = $("#certNo").val();
		var cardPhone = $("#cardPhone").val();
		var MessageNumber = $("#MessageNumber").val();
		var acctType = $("#acctType").val();
		if(!cardNo){
			alert("请输入银行卡号");
			return;
		}
		if(!userName){
			alert("请输入姓名");
			return;
		}
		if(!certNo){
			alert("请输入身份证号码");
			return;
		}
		if(!cardPhone){
			alert("请输入银行预留号码");
			return;
		}
		if(acctType == 1){
			var expireDate = $("#expireDate").val();
			var cvn = $("#cvn").val();
			if(!expireDate){
				alert("请输入信用卡过期时间");
				return;
			}
			if(!cvn){
				alert("请输入信用卡安全码");
				return;
			}
		}
		if(FLAG){
			if(!MessageNumber){
				alert("请输入短信验证码");
				return;
			}
		}
		var data = {cardNo:cardNo,userName:userName,certNo:certNo,cardPhone:cardPhone,acctType:acctType,expireDate:expireDate,cvn:cvn,MessageNumber:MessageNumber};
		$.post('/pay/open.do',data,function(rsg){
			if(rsg.code == 200){
				$("#show").show();
				FLAG = true;
				alert(rsg.message);
			}else{
				alert(rsg.message);
			}
		},'json');
		
	}
	
</script>
</html>